

const todoTemplate = document.createElement('template');


todoTemplate.innerHTML = `
<link rel="stylesheet" href="./init.css">
<style>

.todo-list {
    width: 500px;
    margin: 15px auto;
    animation: head-show .3s ease .4s forwards;
    opacity: 0;
}

.todo-list ul {
    width: 100%;
}

.todo-list .todo-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    border: solid 1px #ccc;
    padding: 10px 10px;
    outline: none;
    position: relative;
}

.todo-list .todo-item input:checked+p {
    text-decoration: line-through;
    opacity: .5;
}

.todo-list .todo-item .check {
    margin-right: 10px;
}

.todo-list .put {
    position: relative;
    width: 100%;
}

.todo-list .put .do {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s;
}


.todo-list .put .do:hover {
    color: lightcoral;
    transform: translateY(-50%) scale(1.2);
}

.todo-list .todo-item button {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    margin-left: auto;
    transform: scale(1.5);
}

.todo-list .todo-item button:hover {
    color: violet;
}

</style>
<div class="todo-list">
    <div class="put">
        <input class="todo-item" />
        <div class="do">ready</div>
    </div>
    <ul>
        <li class="todo-item">
            <button>--</button>
            <p></p>
        </li>
    </ul>
    <p>simple todo-list</p>
</div>
`;
class TodoList extends HTMLElement {
    constructor() {
        super();
        const self = this;
        this._shadowRoot = this.attachShadow({ mode: 'open' });
        this._shadowRoot.appendChild(todoTemplate.content.cloneNode(true));

        // init data
        this.data = ["eat", "sleep", "doudou"];
        this.currentValue = "";

        // get elements
        this.$container = this._shadowRoot.querySelector('.todo-list');
        this.ul = this._shadowRoot.querySelector("ul");
        this.input = this._shadowRoot.querySelector("input");
        this.submit = this._shadowRoot.querySelector(".do");
        // this.close = this._shadowRoot.querySelector(".close");

        // bind event
        this.input.onkeydown = function (e) {
            if (e.keyCode !== 13 || self.currentValue.trim() == "") { return };
            if (self.data.includes(self.input.value)) { return };
            self.data.unshift(self.input.value);
            self.input.value = "";
            self.currentValue = "";
            self.render();
        }
        this.input.oninput = (e) => {
            this.currentValue = this.input.value;
        }
        this.submit.onclick = () => {
            console.log(this.data);
            if (this.data.includes(this.input.value) || this.currentValue.trim() == "") { return };
            this.data.unshift(this.input.value);
            this.input.value = "";
            this.currentValue = "";
            render();
        }
        this.ul.onclick = function (e) {

            const flag = e.target.dataset.flag;
            if (flag) {
                const i = self.data.indexOf(flag);
                self.data.splice(i, 1);
                self.render();
            }
        }

        this.render();


    }

    render() {
        let str = "";
        this.data.forEach((item, index) => {
            str += `<label class="todo-item" for="${item}">
                <input type="checkbox" class="check" id="${item}" />
                <p class="content">${item}</p>
                <button class="close" data-flag="${item}">×</button>
            </label>`
        })
        this.ul.innerHTML = str;
    }
}

window.customElements.define("todo-list", TodoList);